<template>
  <view class="content">
    <u-search @focus="searchFocus" @blur="searchBlur" placeholder="请输入关键字" :action-style="actionStyle"
              :animation="true" v-model="keyword">
      <template v-slot:left>
        <view class="flex align-center m-1 p-1" @click="toCityList">
          <text class="font">{{ city }}</text>
          <uni-icons class="ml-1" type="down" size="15" color="#bdbdbd"></uni-icons>
          <view class="line-sm mx-2"></view>
        </view>
      </template>
    </u-search>
    <!-- 宫格选择 -->
    <view class="container">
      <swiper :indicator-dots="true" class="swiper">
        <swiper-item>
          <u-grid :border="false" col="5">
<!--            上面一排-->
            <u-grid-item v-for="(item, index) in newHotList" :key="index+20" @click="toSwitchTab(item.url)">
              <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.img" size="60"></u-icon>
              <text class="grid-text font font-weight-6 text-black">{{ item.title }}</text>
            </u-grid-item>
<!--            其他-->
            <u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex" @click="toProductDetail">
              <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.img" size="30"></u-icon>
              <text class="grid-text font-sm">{{ listItem.title }}</text>
            </u-grid-item>
          </u-grid>
        </swiper-item>
        <swiper-item>
          <u-grid :border="false" col="5">
            <u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
              <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.img" :size="30"></u-icon>
              <text class="grid-text font-sm">{{ listItem.title }}</text>
            </u-grid-item>
          </u-grid>
        </swiper-item>
      </swiper>
    </view>
    <!-- 中部卡片样式 -->
    <view class="card-top">
      <image style="width: 100%;height: 380rpx;" src="/static/image/img.png"></image>
    </view>
    <!-- 下部分 -->
    <view class="c-card">
      <view class="card-container p-2">

        <view class="bg-white p-2 rounded-lg position-relative">
          <view class="card-bac flex flex-column justify-between">
            <image class="position-absolute left-0 top-0" style="width: 100%;height: 100%"
                   src="/static/image/img2.png"></image>
            <view class="position-relative flex flex-column " style="z-index: 11">
              <text class="font font-weight-bold">家电家居福利厂</text>
              <text class="font-sm pt-1 pb-1" style="color: #8e8e91">最高可减
                <text class="text-danger">40</text>
                元
              </text>
              <view class="rounded-circle flex justify-center align-center" style="width: 155rpx;background: #fceeed">
                <text class="font-sm p-1" style="color: red;">立即预约 ></text>
              </view>
            </view>
          </view>
        </view>
        <view class="bg-white p-2 rounded-lg position-relative">
          <view class="card-bac flex flex-column justify-between">
            <image class="position-absolute left-0 top-0" style="width: 100%;height: 100%"
                   src="/static/image/img2.png"></image>
            <view class="position-relative flex flex-column " style="z-index: 11">
              <text class="font font-weight-bold">柳杨絮防卫战</text>
              <text class="font-sm pt-1 pb-1" style="color: #8e8e91">玻璃清洗低至
                <text class="text-danger">6.9</text>
                元/㎡
              </text>
              <view class="rounded-circle flex justify-center align-center" style="width: 155rpx;background: #fceeed">
                <text class="font-sm p-1" style="color: red;">立即预约 ></text>
              </view>
            </view>
          </view>
        </view>
        <view class="bg-white p-2 rounded-lg position-relative">
          <view class="card-bac flex flex-column justify-between">
            <image class="position-absolute left-0 top-0" style="width: 100%;height: 100%"
                   src="/static/image/img2.png"></image>
            <view class="position-relative flex flex-column " style="z-index: 11">
              <text class="font font-weight-bold">邀好友 领好礼</text>
              <text class="font-sm pt-1 pb-1" style="color: #8e8e91">
                <text class="text-danger">880</text>
                好礼限时领
              </text>
              <view class="rounded-circle flex justify-center align-center" style="width: 155rpx;background: #fceeed">
                <text class="font-sm p-1" style="color: red;">立即领取 ></text>
              </view>
            </view>
          </view>
        </view>
        <view class="bg-white p-2 rounded-lg position-relative">
          <view class="card-bac flex flex-column justify-between">
            <image class="position-absolute left-0 top-0" style="width: 100%;height: 100%"
                   src="/static/image/img2.png"></image>
            <view class="position-relative flex flex-column " style="z-index: 11">
              <text class="font font-weight-bold">180元券包</text>
              <text class="font-sm pt-1 pb-1" style="color: #8e8e91">下单最高减
                <text class="text-danger">20</text>
              </text>
              <view class="rounded-circle flex justify-center align-center" style="width: 155rpx;background: #fceeed">
                <text class="font-sm p-1" style="color: red;">立即领取 ></text>
              </view>
            </view>
          </view>
        </view>

      </view>
    </view>

    <!-- 热门推荐 -->
    <view class="recommend_text">
      <text class="font-weight-bold">热门推荐</text>
    </view>
    <view class="hot_recommend">
      <view class="recommend_left">
        <image class="rec_content_image_style" src="/static/index-image/img_5.png"
               mode="scaleToFill"></image>
        <view class="rec_content_text">
          <text class="font font-weight-nn">
            洗衣机维修
          </text>
          <text class="font-md font-weight-bold pt-1">
            点击立即维修>
          </text>
        </view>
      </view>
      <view class="recommend_right">
        <view class="rec-right-card">
          <image class="rec_content_image_style" src="/static/index-image/img_6.png"
                 mode="scaleToFill"></image>
          <view class="rec-right-card-text">
            <text class="font-weight-nn" style="font-size: 14px">空调清洗</text>
            <view class="rec-right-href btn-shadow">
              <text class="font-sm p-1 font-weight-nn" style="color: #838486">预约清洗</text>
            </view>
          </view>
        </view>
        <view class="rec-right-card">
          <image class="rec_content_image_style" src="/static/index-image/img_6.png"
                 mode="scaleToFill"></image>
          <view class="rec-right-card-text">
            <text class="font-weight-nn" style="font-size: 14px">精准测漏</text>
            <view class="rec-right-href btn-shadow">
              <text class="font-sm p-1 font-weight-nn " style="color: #838486">预约清洗</text>
            </view>
          </view>
        </view>
        <view class="rec-right-card">
          <image class="rec_content_image_style" src="/static/index-image/img_6.png"
                 mode=""></image>
          <view class="rec-right-card-text">
            <text class="font-weight-nn" style="font-size: 14px">台式电脑维修</text>
            <view class="rec-right-href btn-shadow">
              <text class="font-sm p-1 font-weight-nn" style="color: #838486">预约清洗</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 联系管家 -->
    <uni-card margin="0" spacing="0" :is-shadow="false" padding="0">
      <view class="manage-container-backgroud">
        <view class="manage-container">
          <view class="manage-img-text">
            <!-- 头像图片 -->
            <view class="manage-left-img">
              <image style="flex: 1;height: 100%;width: 100%;"
                     src="https://m.zmn.cn/static/mobile/img/yy.gif" mode="scaleToFill"></image>
            </view>
            <view class="manage-center-text">
              <text class="font-weight-bold text-dark manage-center-text-top">
                领取你的专属管家
              </text>
              <text class="manage-center-text-bottom font-sm font-weight-nn">
                贴心服务、24小时家修守护
              </text>
            </view>
          </view>
          <view class="manage-center-right-botton flex justify-center align-center">
            <uni-icons type="chat-filled"></uni-icons>
            <text class="font-sm">立即添加</text>
          </view>
        </view>
      </view>
    </uni-card>

    <!-- 内容列表 -->
    <business v-for="index in 4" :key="index"></business>
  </view>
</template>

<script>
import business from './business/business.vue'

export default {
  components: {
    business
  },
  data() {
    return {
      keyword: '',
      city: '成都',
      newHotList: [
        {
          img: '/static/index-image/img.png',
          title: '家电维修',
          url: '/pages/tabs/all-servers/all-servers'
        },
        {
          img: '/static/index-image/img_1.png',
          title: '数码办公',
          url: '/pages/tabs/all-servers/all-servers'
        },
        {
          img: '/static/index-image/img_2.png',
          title: '家电清洗',
          url: '/pages/tabs/all-servers/all-servers'
        },
        {
          img: '/static/index-image/img_3.png',
          title: '家电安装',
          url: '/pages/tabs/all-servers/all-servers'
        },
        {
          img: '/static/index-image/img_4.png',
          title: '管道疏通',
          url: '/pages/tabs/all-servers/all-servers'
        },
      ],
      list: [
        {
          img: 'https://m.zmn.cn/static/mobile/img/item1.png',
          title: '家电维修'
        },
        {
          img: 'https://m.zmn.cn/static/mobile/img/item2.png',
          title: '数码办公'
        },
        {
          img: 'https://m.zmn.cn/static/mobile/img/item3.png',
          title: '家电清洗'
        },
        {
          img: 'https://m.zmn.cn/static/mobile/img/item4.png',
          title: '家电安装'
        },
        {
          img: 'https://m.zmn.cn/static/mobile/img/item5.png',
          title: '管道疏通'
        },
        {
          img: 'https://m.zmn.cn/static/mobile/img/item6.png',
          title: '水电维修'
        },
        {
          img: 'https://m.zmn.cn/static/mobile/img/item7.png',
          title: '家具维保'
        },
        {
          img: 'https://m.zmn.cn/static/mobile/img/item8.png',
          title: '门窗维保'
        }, {
          img: 'https://m.zmn.cn/static/mobile/img/item9.png',
          title: '防水补漏'
        },
        {
          img: 'https://m.zmn.cn/static/mobile/img/item10.png',
          title: '墙面翻新'
        },
        {
          img: 'https://m.zmn.cn/static/mobile/img/item1.png',
          title: '家电维修'
        },
        {
          img: 'https://m.zmn.cn/static/mobile/img/item2.png',
          title: '数码办公'
        },
        {
          img: 'https://m.zmn.cn/static/mobile/img/item3.png',
          title: '家电清洗'
        },
        {
          img: 'https://m.zmn.cn/static/mobile/img/item4.png',
          title: '家电安装'
        },
        {
          img: 'https://m.zmn.cn/static/mobile/img/item5.png',
          title: '管道疏通'
        },
      ],
      // 搜索样式
      actionStyle: {}
    }
  },
  onShow() {
    this.city = uni.getStorageSync('city')
  },
  methods: {
    toCityList() {
      uni.navigateTo({
        url: '/pages/city_list/city_list'
      })
    },

    toProductDetail(){
      uni.navigateTo({
        url: '/pages/product_detail/product_detail'
      })
    },
    // 跳转tab页
    toSwitchTab(url){
      uni.switchTab({
        url
      })
    },
    // 跳转商品详情
    // 搜索框获取焦点时
    searchFocus() {
      this.actionStyle = {
        background: '#3C9BFDFF',
        padding: '5px 8px',
        borderRadius: '15px',
        color: '#FFFFFF',
        transition: 'padding 0.1s'
      }
    },
    // 失去焦点时
    searchBlur() {
      this.actionStyle = {}
    },

    change(e) {
      this.current = e.detail.current;
    }
  }
}
</script>

<style lang="scss">
$text-margin: 35rpx 0 18rpx 0;

.line-sm {
  border: 1rpx solid #bebebe;
  height: 30rpx;
}

// 顶部宫格
.swiper {
  height: 670rpx;
}

.grid-text {
  color: #909399;
  padding: 10rpx 0 20rpx 0;
  /* #ifndef APP-PLUS */
  box-sizing: border-box;
  /* #endif */
}

// 中部卡片
.c-card {
  border-radius: $uni-border-radius;
  background-color: #ffecce;

  & .card-container {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: auto auto;
    gap: 8px;
  }
}

.card-top {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: -1px;
}


.recommend_text {
  margin: $text-margin;
}

// 热门推荐
.hot_recommend {
  margin: $text-margin;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .recommend_left {
    height: 480rpx;
    width: 47%;
    border-radius: $uni-border-radius;
    position: relative;
    display: flex;
    flex-direction: row;
    overflow: hidden;

    .rec_content_text {
      display: flex;
      flex-direction: column;
      position: absolute;
      z-index: 2;
      height: 50%;
      width: 100%;
      padding: 20rpx;
      background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
    }
  }

  .recommend_right {
    height: 480rpx;
    width: 47%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .rec-right-card {
      height: 150rpx;
      border-radius: $uni-border-radius;
      position: relative;
      display: flex;
      flex-direction: row;
      overflow: hidden;

      .rec-right-card-text {
        display: flex;
        flex-direction: column;
        position: absolute;
        z-index: 2;
        height: 100%;
        width: 100%;
        padding: 18rpx;
        background-image: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
      }
    }
  }
}

// 专属管家
.manage-container-backgroud {
  background-color: #ebf3ff;

  .manage-container {
    height: 100rpx;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .manage-img-text {
      display: flex;
      flex-direction: row;

      .manage-left-img {
        height: 80px;
        width: 80px;
        border-radius: 50%;
      }

      .manage-center-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    }
  }

  .manage-center-right-botton {
    background: #FFFFFF;
    border-radius: 30px;
    padding: 5px 10px;
  }
}


.rec-right-href {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: white;
  width: 50%;
  border-radius: 20px;
  margin-top: 15rpx;
}

.rec_content_image_style {
  height: 100%;
  width: 100%;
  flex: 1;
  border-radius: $uni-border-radius;
}

.btn-shadow {
  box-shadow: 0 0 1px #9f9999;
}
</style>
